<template>
  <div class="app-container">
    <el-scrollbar  class="app-container-scroll-bar">
         <el-row style="margin-top:10px;border-bottom:1px solid #e2e7eb;">
        <el-col style="font-size:20px;margin-bottom:10px;" :span="24">
          <span style="margin-left:20px;">菜单管理</span>
        </el-col>
      </el-row>
      <el-row style="margin-top:30px;">
        <el-col>
            <el-button @click="addMenu" size="small" style="float:right;margin-right:25px;">
              <i class="iconfont icon-folder-add"></i>新增菜单
            </el-button>
          </el-col>
      </el-row>

      <!-- 表格 -->
      <el-row style="margin-top:10px;">
        <el-col :span="23" style="margin-left:25px">
          <tree-table :data="data" :eval-func="func"  :expand-all="expandAll" v-loading="loading">
            <el-table-column label="名称">
              <template slot-scope="scope">
                <span>{{scope.row.text}}</span>
              </template>
            </el-table-column>

            <el-table-column label="类型" align="center">
              <template slot-scope="scope">
                <!-- <span v-if="scope.row.attributes.type === 0">目录</span>
                <span v-else-if="scope.row.attributes.type ===  1">菜单</span>
                <span v-else>按钮</span> -->
                <span  v-if="scope.row.type === 0">目录</span>
                <span v-else-if="scope.row.type ===  1">菜单</span>
                <span v-else>按钮</span>
              </template>
            </el-table-column>
             
            <el-table-column label="图标" align="center">
              <template slot-scope="scope">
                 <i :class="'iconfont ' + scope.row.icon" style="font-size:18px;"></i>
              </template>
            </el-table-column>

            <el-table-column label="地址" align="center">
              <template slot-scope="scope">
                <!-- <a>{{scope.row.attributes.url}}</a> -->
                <a>{{scope.row.url}}</a>
              </template>
            </el-table-column>

            
            <el-table-column label="状态" align="center">
              <template slot-scope="scope">
                <!-- <span v-if=" scope.row.attributes.status === 1" style="color: #52c41a;">启用</span>
                <span v-else style="color:red">禁用</span> -->
                <span v-if=" scope.row.status === 1" style="color: #52c41a;">启用</span>
                <span v-else style="color:red">禁用</span>
              </template>
            </el-table-column>


            <el-table-column label="操作" width="200" align="right">
              <template slot-scope="scope">
                <a title="删除" style="font-size:16px;display:inline-block;margin-top:3px;cursor: pointer;"  
                   @click="handleDelete(scope.row)">
                <i class="el-icon-delete"></i>
                </a>
                <a title="新增子菜单" style="font-size:16px;display:inline-block;margin-top:3px;cursor: pointer;margin-left: 15px;"  
                   @click="handleAddChild(scope.row)">
                <i class="el-icon-circle-plus-outline"></i>
               </a>
                  <a title="编辑" style="font-size:16px;display:inline-block;margin-top:3px;cursor: pointer;margin-left: 15px;"  
                   @click="handleEdit(scope.row)">
                <i class="el-icon-edit"></i>
               </a>
              </template>
            </el-table-column>
          </tree-table>
        </el-col>
      </el-row>
    </el-scrollbar>


    	<!--弹窗内容 start-->
		<div class="app-output-window">
			
			<addCD ref="addCD" @handleRefsh="handleRefsh"></addCD>
      <updateCD ref="updateCD" @handleRefsh="handleRefsh"></updateCD>
			
		</div>
		<!--弹窗内容 end-->
  </div>
</template>
<script>
import { menuFilter } from '@/filters/status/index';
import treeTable from '@/components/TreeTable'
import treeToArray from './tree/customEval'
import { getMenuList, deleteMenu } from '@/service/swagger/MenuController.js'
import addCD from '@/view/pages/xitong/caidan/addCD.vue';
import updateCD from '@/view/pages/xitong/caidan/updateCD.vue';
export default {
  components: {
    treeTable,
    addCD,
    updateCD
  },
  data() {
    return {
      data: {},
      // attributes:{},
      loading: false,
      func: treeToArray,
      expandAll: false,
      loading: false,
    }
  },
  mounted() {
    this.initData()
  },
  methods: {
    initData() {
      this.loading = true
      getMenuList({}).then(ret => {
        if (ret.code === 0) {
          this.loading = false
          // this.data = ret.data.children
          this.data = this.bianli(ret.data)
          console.log(this.data,11111)
        }
      })
    },
    bianli(obj) {
      if (obj.children) {
        obj.children.forEach(el => {
          el.type = el.attributes.type
          el.status = el.attributes.status
          el.url = el.attributes.url
          el.icon = el.attributes.icon
          this.bianli(el)
          return obj
        })
        return obj.children
      }
    },
    addMenu() {
      this.$refs.addCD.open()
    },
    //删除
    handleDelete(row) {
      this.$confirm('确定删除该菜单?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteMenu(row.id).then(ret => {
          if (!ret.code) {
            this.$message({
              message: '删除成功!',
              type: 'success'
            })
            this.handleRefsh()
          } else {
            this.$message({
              message: '删除失败!',
              type: 'error'
            })
          }
        })
      })
    },
    //编辑菜单
    handleEdit(row) {
      this.$refs.updateCD.open(row)
    },
    //新增子级菜单
    handleAddChild(row) {
      console.log(row)
      this.$refs.addCD.open(row)
    },
    handleRefsh() {
      this.initData()
    }
  }
}
</script>
<style scoped>
.s1 {
  color: #52c41a;
}
.s2 {
  color: red;
}
</style>


